<template>
  <div>
    <div class="app-container">
      <Row style="background: #eee; padding: 20px">
        <Col span="13">
          <Card :bordered="false">
            <p slot="title">选择商品</p>
            <Table border :columns="columnsGoods" @on-selection-change="Selector" :data="dataGrid"></Table>
          </Card>
        </Col>
        <Col span="10" offset="1">
          <Card shadow>
            <p slot="title">已选货位</p>
            <Table border :columns="columns" :data="damageList"></Table>
          </Card>
        </Col>
      </Row>
      <div style="display: flex; margin:10px; justify-content: flex-end">
        <Button @click="addDamage" type="primary">提交</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "OutstockLocation",
  data() {
    return {
      index: 0,
      damageList: [],
      dataGrid: [],
      columnsGoods: [
        {
          type: "selection",
          key: "warehouseShelfSkuId",
          width: 60,
          align: "center",
        },
        {
          title: "商品名称",
          key: "skuName",
        },
        {
          title: "库区",
          key: "warehouseAreaName",
          width: 90
        },
        {
          title: "库位",
          key: "locationCode",
          width: 90
        },
        {
          title: "货位",
          key: "shelfCode",
          width: 90
        },
        {
          title: "数量",
          key: "total",
          width: 80
        },
      ],
      columns: [
        {
          title: "库区",
          key: "warehouseAreaName",
        },
        {
          title: "库位",
          key: "locationCode",
        },
        {
          title: "货位",
          key: "shelfCode",
        },
        {
          title: "出库数量",
          key: "total",
          width: 120,
          render: (h, params) => {
            return h("InputNumber", {
              props: {
                value: params.row.count,
                max: params.row.count,
                min: 1,
                size: "small",
              },
              on: {
                input: (val) => {
                  if (val) {
                    this.damageList[params.index].count = Number(val);
                  } else {
                    this.damageList[params.index].count = 0;
                  }
                },
              },
            });
          },
        },
      ]
    }
  },
  watch: {
    rowItem(newVal) {
      this.Init(newVal.skuId)
      if(newVal.shelfSkuList) {
        this.damageList = newVal.shelfSkuList
      }
    },
    rowIndex(newVal) {
      this.index = newVal
    },
  },
  props: {
    rowItem: Object,
    rowIndex: Number,
    callback: Function,
  },
  methods: {
    addDamage() {
      this.damageList.forEach(item=>{
        item.total = item.total - item.count;//剩余库存=可用库存-出库数量
      })
      this.callback({
        data: this.damageList,
        index: this.index
      })
    },
    Selector(selection) {
      selection.forEach(element => {
        element.count = this.rowItem.goodsQty
      })
      this.damageList = selection
    },
    Init(id) {
      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-wms",
        url: "/v1.0/warehouse/shelf/sku/page",
        query: {
          pageIndex: 1,
          pageSize: 100,
          equal: {
            skuId: id,
            warehouseId: this.$store.getWms('warehouseId')
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list
            data.forEach(item=>{
              this.rowItem.shelfSkuList.forEach(element => {
                if(element.warehouseShelfSkuId == item.warehouseShelfSkuId) {
                  item._checked = true
                }
              })
            })
            this.dataGrid = data
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: res.data.msg,
            })
          }
        },
      }).get()
    },
  },
};
</script>